<script setup lang="ts">
import Price from '@/components/Price.vue'
</script>
<template>
  <div class="product-card-item" @click="$router.push('/product/1')">
    <div class="img-block">
      <img v-lazy="'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'">
    </div>
    <div class="action-bar">
      <span class="van-ellipsis">主标题</span>
      <Price value="30.00" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.product-card-item {
  border-radius: var(--size-border-radius);
  // border: 1px solid;
  width: 100%;
  background-color: var(--vt-c-white);
  .img-block {
    img {
      display: block;
      border-top-left-radius: var(--size-border-radius);
      border-top-right-radius: var(--size-border-radius);
      width: 100%;
      object-fit: cover;
    }
    img[src=""], img:not([src]) {
      background: url('../../assets/default_product.jpg') no-repeat center;
      background-size: 100% 100%;
    }
  }
  .action-bar {
    font-weight: 500;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    padding: 2px 15px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    .price {
      color: var(--color-text-price);
    }
  }
}
</style>